<script setup lang="ts">
import {useMessage} from 'naive-ui'

const message = useMessage()
const user = useUserStore()

import type Article from "~/api/article";

defineProps({
  article: {
    type: Object as () => Article,
    required: true,
    default: {} as Article
  }
})


const reportModalFlag = ref(false)

</script>

<template>
  <div
      class="relative border-b border-gray-200 dark:border-gray-800 py-4 px-4 bg-white dark:bg-gray-900 hover:bg-gray-100/50 dark:hover:bg-gray-900/50">
    <div class="relative flex flex-wrap items-center justify-between gap-6 mb-2 text-gray-500 dark:text-gray-500">
      <div
          class="inline-flex items-center flex-shrink-0 text-sm">
        <div class="relative inline-flex items-center flex-shrink-0 text-xs rounded-full h-8 w-8">
          <img class="rounded-full h-6 w-6 text-xs"
               :src="article.createUser.avatar"
               :alt="article.createUser.nickname"
          >
        </div>
        <div class="text-left line-clamp-1">
          <p class="font-medium">{{ article.createUser.nickname }}</p>
        </div>
      </div>
      <nuxt-link
          :to="`/u/${article.createUser._id}`"
      ><span class="absolute inset-0"></span>
      </nuxt-link>
      <div>
        <UTooltip text="举报">
          <UButton
              @click="reportModalFlag = true"
              icon="i-heroicons-ellipsis-horizontal-solid"
              size="2xs"
              color="gray"
              variant="link"
              label=""
          />
        </UTooltip>
      </div>
    </div>

    <div>
      <nuxt-link
          :to="`/t/${article._id}`"
      >
        <div class="text-sm mb-2 dark:text-gray-300" v-html=" article.content">
        </div>
        <div v-if="article.fromWho" class="text-sm mb-2 dark:text-gray-300">
          —— {{ article.fromWho }}「{{ article.from }}」
        </div>
      </nuxt-link>
      <ClientOnly>
        <div class="mb-2">
          <ImageList
              v-if="article.images && article.images.length > 0"
              :images="article.images"
          />
        </div>
      </ClientOnly>
    </div>

    <nuxt-link
        :to="`/t/${article._id}`"
        class="relative flex items-center justify-between text-zinc-400 dark:text-gray-500"
    >
      <div class="text-xs"> {{ timeAgo(article.createdAt) }}</div>
      <div class="flex justify-end items-center gap-1.5">
        <UButton
            icon="i-heroicons-heart-20-solid"
            size="2xs"
            color="gray"
            variant="link"
            :label="article.likeCount + ''"
        />
      </div>
    </nuxt-link>
  </div>

  <Report v-model:show="reportModalFlag" :articleId="article._id"/>
</template>

<style lang="scss" scoped>
.article-card {

}
</style>